<template>
  <div>
    <custom-form
      :columns="columns"
      :rules="rules"
      v-bind="$attrs"
      v-on="listeners"
      v-model="FormData"
    >
  <!-- <template v-slot:oldWater="{row}">
      <div style="color:red; background-color: aqua;">{{row }}内容</div>
    </template> -->
    </custom-form>
  </div>

</template>

<script>
import customFromMixin from '@/utils/mixin/custom-form'
import curd from '@/api/curd'
export default {
  name: 'AddForm',
  mixins: [customFromMixin],
  data() {
    return {
      rules: {},
      FormData: {

      },
      // 列配置
      columns: [
        // { name: '名称', field: 'name', opts: { required: true, maxlength: 50 } },
        {
          name: '房号',
          field: 'room_id',
          opts: { control: 'room', name: 'name', required: true, reload: true },
          type: 'select_table'
        },
        { name: '水表读数', field: 'water', opts: { required: true }, type: 'number' },
        { name: '电表读数', field: 'electricity', opts: { required: true }, type: 'number' },

        { name: '上次水表读数', field: 'oldWater', opts: { required: true, disabled(formData, detail) {
          return !!formData.oldWater
        } }, type: 'number', visible(formData, detail) {
          return formData.room_id
        } },
        { name: '上次电表读数', field: 'oldEle', opts: { required: true, disabled(formData, detail) {
          return !!formData.oldEle
        } }, type: 'number', value: 0, visible(formData, detail) {
          return formData.room_id
        } },
        {
          name: '状态',
          field: 'status',
          label: false,
          type: 'radio',
          opts: { required: true },
          list: ['未缴费', '已缴费'],
          value: 0
        },
        { name: '日期', field: 'fee_date', type: 'date', opts: { maxlength: 120, required: true } },

        // { name: '上传数据', field: 'fee_date', type: 'upload_xls' },
        { name: '备注', field: 'mark', type: 'textarea', opts: { maxlength: 120 } }
      ]
    }
  },
  watch: {
    'FormData.room_id'(newName, oldName) {
      // this.fullName = newName + ' ' + this.lastName
      console.log('newName', newName)
      // console.log('oldName', oldName)
      if (newName) {
        this.getOldData(newName)
      }
    }
  },
  created() {
    setTimeout(() => {
      console.log('table_$attrs', this.$attrs)
      console.log('table_listeners', this.listeners)
    }, 2000)
  },
  computed: {
    // getOldData() {
    //   console.log('获取旧数据')
    //   return 11
    // }
  },
  methods: {
    getOldData(newName) {
      var that = this
      // console.log('获取旧数据')
      var data = {
        room_id: newName
      }
      curd('payRecord').get('getLastReading', data).then(res => {
        console.log('获取成功', res)
        var arr = res.data
        if ('water' in arr) {
          that.$set(that.FormData, 'oldWater', arr.water)
        } else {
          that.$set(that.FormData, 'oldWater', 0)
        }
        if ('electricity' in arr) {
          that.$set(that.FormData, 'oldEle', arr.electricity)
        } else {
          that.$set(that.FormData, 'oldEle', 0)
        }
      })

      // console.log('获取成功', res)
    }
  }
}
</script>

<style scoped>

</style>
